<template>
    <div class="wrapper" >
        <!-- 搜索展示区 -->
        <div class="searchBox">
            <div class="searchWrap" >
                <input type="text" class="searchInput" @click="goSearch">
            </div>
        </div>

        <div class="homeMain">
            <!-- 地图展示区 -->
            <div class="mapBox" >
                <Map></Map> 
            </div>

            <!-- 分类导航 -->
            <ul class="sortNav" >
                <li 
                    v-for="(sort,index) in sortList" 
                    class="img-container"
                    :key=index
                    :class="{'active':activeIndex == index}"
                    
                    @click="addActiveClass(index)">  <!-- 获取第一个属性 -->
                    <i 
                        class="iconfont"
                        :class="sort.iClass"
                        ></i>
                </li>   
    
                
            </ul>

            <!-- 分类介绍 -->
            <div class="sortDiv">
                    <span>{{sortList[activeIndex].name}}</span>
                    <img src="@/assets/images/icon/更多_1.svg" alt="" class="more" @click="goSearch">
                </div>
            <!-- 商品展示区 -->
            <ul class="GoodsDisplay" 
                ref="goodsListRef"
                v-loading="isLoading"
                element-loading-background ="rgba(242,242,242,0)">
                <!-- v-for遍历，将商品信息传递给GoodsCard子组件 -->
                <li class="goodsCard" 
                v-for="(good,index) in goodsList[sortList[activeIndex].keyWord]" >
                    <GoodsCard 
                        :coverImages="good.coverImages"
                        :priceDay="good.priceDay"
                        :priceMonth="good.priceMonth"
                        :title="good.title"
                        @click="goGoodsDetail(good.goodsId,good.userId)">
                    </GoodsCard> 

                </li>

                <div 
                    class="loading" 
                    v-show="true" 
                    v-loading="isLoadingNew"
                    element-loading-background="rgba(242,242,242,0)">
                </div>
                
            </ul>
            
            <CommonNav></CommonNav>  
        </div>

    </div> 
    

</template>
    
<script setup>

    import Map from '@/components/home/Map.vue'
    import CommonNav from '@/components/CommonNav.vue';
    import GoodsCard from '@/components/goods/SingleGoodsCard.vue';
    /* 引入hooks */
    import { onMounted,onBeforeMount,reactive,ref,computed,nextTick} from 'vue'
    import useState from '@/hooks/useMapState'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex';
    import {debounce} from '@/hooks/useHOF.js'


    let isLoading = computed(()=>{
        return store.state.goods.isLoadingSort;
    })
    let isLoadingNew = computed(()=>{
        return store.state.goods.isLoadingSortNew;
    })
    
    const router = useRouter();
    const store = useStore();

    //推荐商品列表
    var goodsList = computed(()=>{
        return store.state.goods.goodsList;
    })
    
    //??????????????
  /*   var {goodsList} = useState('goods',['goodsList']); */

    //展示区
    var activeIndex = ref(0);
    
    //切换分类展示
    function addActiveClass(index){
        activeIndex.value  = index;
        store.dispatch('goods/getGoodsList',
            {
                type:sortList[index].keyWord,
                keyword:sortList[index].name,
                size:10,
                isMore:false
            }
        );
        
    }

    //主页分类列表
    var sortList = reactive([
        {
            name:'推荐',
            keyWord:'recommend',
            iClass:'icon-tuijian',

        },
        {
            name:'摄影',
            keyWord:'photography',
            iClass:'icon-xiangji1',
    
        },
        {
            name:'书籍',
            keyWord:'book',
            iClass:'icon-shuji',
        
        },
        {
            name:'汽车',
            keyWord:'car',
            iClass:'icon-qichepeijian',
        
        },
        {
            name:'数码',
            keyWord:'digital',
            iClass:'icon-youxi'
    
        },

    
    ]);


    //在setup中发送请求
    let keyword = ref(' ')
    let size = ref(10);
    onBeforeMount(()=>{
        store.dispatch(
            'goods/getGoodsList',
            {type:sortList[0].keyWord,keyword:keyword.value,size:size.value,isMore:false}
        );
    })


    //横向滚动
    const goodsListRef = ref();
    onMounted(()=>{
        goodsListRef.value.addEventListener('scroll',checkScroll);
    })

    //防抖高阶函数包装
    const  checkScroll = debounce(function(){
            console.log(goodsListRef.value.scrollWidth);
            console.log(goodsListRef.value.scrollLeft);
            if (goodsListRef.value.scrollLeft>10 &&
                goodsListRef.value.scrollWidth -goodsListRef.value.scrollLeft <=500){
                console.log(`加载${sortList[activeIndex.value].keyWord}新数据`);
                store.dispatch('goods/getGoodsList',
                {
                    type:sortList[activeIndex.value].keyWord,
                    keyword:sortList[activeIndex.value].name,
                    size:10,
                    isMore:true
                })
            }
    })
    


    

    //跳转搜索页
    function goSearch(){
        router.push({
            name:'search'
        })
    }

    //跳转商品详情页
    function goGoodsDetail(goodsId,userId){
        router.push({
            name:'goodsDetail',
            params:{
                goodsId:goodsId,
                userId:userId
            }
        })
    }
    



</script>

<style lang="scss" scoped>

.wrapper{
    transition: none;
    margin-top:0;
    width: 4.28rem;
    overflow: hidden;
    height: 9.26rem;
    overflow: scroll;
    background: rgba(242,242,242,0.50);
    /* 搜索 */

    
    .searchBox{
        width: 4.28rem;
        height: 1.01rem;
        background-color: #6FA11E;
        .searchWrap{
        width: 4.28rem;
        position: relative;
        top:0.5rem;
        /* 搜索栏 */
        .searchInput{
            width: 3.50rem;
            height: 0.40rem;
            margin-left: 0.39rem;
            background-image: url(@/assets/images/icon/搜索.svg);
            background-repeat:no-repeat;
            background-size:0.25rem 0.25rem;    /*这里是图片的大小*/
            background-position: 0.26rem,0.1rem ;
            border-radius: 0.15rem;
            font-size: 0.14rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            font-weight: normal;
            text-align: left;
            color: #333333;
            line-height: 0.20rem;
            text-shadow: 0rem 0.01rem 0.02rem 0rem rgba(0,0,0,0.12); 
            border: none;
            padding-left: 0.6rem;
            box-sizing:border-box;
        }
}
    }
    /* 地图展示区 */
    .mapBox{
        width:4.28rem;
        height: 4.1rem;
        border-radius: 20px;
    }

    /* 分类导航 */
    .sortNav{
        margin-top:0.4rem;
        width: 4.28rem;
        height: 0.7rem;
        overflow-x: scroll;
        white-space: nowrap;
        li.img-container{
                display: inline-block;
                margin-left: 0.3rem;
                width: 0.7rem;
                height: 0.7rem;
                border-radius: 50% ;
                background-color: #ffffff;
                text-align: center;
                
            i{
                display: inline-block;
                margin-top:0.14rem;
                font-size: 0.45rem;
                color:#8a8a8a;
            }    

            i.active{
                color:white;
                
            }

        }

        li.active{
            background-color: $themeGreen;
            i{
                color:white
            }
        }


        //设置hover和选中状态，利用filter动态修改svg图片颜色
        >div:hover,>div.container-active{
            background-color: #6FA11E;
            /* 移动端不兼容 */
            img{
                transform: translateX(-100rem);
                filter: drop-shadow(#ffffff 100rem 0);
            }
        }
        
    }

    //分类介绍
    .sortDiv{
        margin-top:0.15rem;
        position: relative;
        width: 100%;
        height: 0.25rem;
        span{
            color: #4b7a02;
            line-height: 25px;
            font-size: 0.2rem;
            font-weight: bold;
            position: absolute;
            left: 0.48rem;
        }

        img{
            width: 0.2rem;
            height: 0.2rem;
            position: absolute;
            right: 0.3rem;
            
        }

    }
    /* 商品展示区 */
    .GoodsDisplay{
        position: relative;
        width: 3.80rem;
        height: 2.5rem;
        margin:0 auto;
        margin-top:0.24rem;
        margin-bottom: 0.64rem;
        /* background-color: black; */
        /* box-shadow:0px 1px 2px 0px #aaaaaa;  */
        white-space: normal;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
        
        
        >li.goodsCard{
            display:inline-block;
            margin-right:0.3rem;
        }

        li:last-child{
            margin-right: 0.1rem;
        }
        

        .loading{
            margin-bottom: 0.7rem;
            display: inline-block;
            width: 100px;
            height: 100px;

            
        }
    }
}
    

</style>